<template>
  <div class="app-container">
    <el-form ref="searchParams" :inline="true" :model="searchParams" label-width="110px">
      <div class="filters-wrap clearfix">
        <div class="filters-area">
          <el-col>
            <el-form-item size="small" label="分类名称" prop="skuName">
              <el-input v-model.trim="searchParams.name" placeholder="请输入分类名称" />
            </el-form-item>
            <el-form-item size="small">
              <el-button type="primary" icon="el-icon-search" @click="getFirstClassifyList">搜索</el-button>
            </el-form-item>
          </el-col>
        </div>
      </div>
    </el-form>
    <el-button v-action="'category@save'" size="small" type="success" style="margin-bottom: 10px" @click="addClassify">新增一级分类</el-button>
    <el-row>
      <el-col :span="6">
        <div class="product-category-text">商品分类</div>
        <el-tree class="ml23" :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false" @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span v-if="data.key != 2">{{ node.label }}</span>
            <span v-if="data.key != 0 && data.id === is_del">
              <img v-action="'category@update'" src="../../../assets/common/edit@2x.png" alt="" class="comon-img margin-left-20" @click.stop="editFirstClassify(data)">
              <img v-action="'category@delete'" src="../../../assets/common/delete@2x.png" alt="" class="comon-img margin-left-10" @click.stop="deleteFirstClassify(data)">
            </span>
          </span>
        </el-tree>
      </el-col>
      <el-col v-if="firstClassObject" :span="18">
        <el-form ref="searchSecondParams" size="small" :inline="true" :model="searchSecondParams" label-width="110px">
          <div class="filters-wrap clearfix">
            <div class="filters-area">
              <el-form-item label="分类名称">
                <el-input v-model.trim="searchSecondParams.name" placeholder="请输入分类名称" @keyup.enter.native="statusQuery" />
              </el-form-item>
              <el-form-item label="状态" prop="toOrgName">
                <el-select v-model.trim="searchSecondParams.status" clearable placeholder="请选择状态" @change="statusQuery">
                  <el-option v-for="(item, index) of statusList" :key="index" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="select_flex">
            <div>
              <el-button v-action="'category@save'" size="small" type="success" style="margin-bottom: 10px" @click="addTwoClassify">新增二级分类</el-button>
            </div>
            <div>
              <el-button size="small" type="primary" icon="el-icon-search" @click="statusQuery">搜索</el-button>
              <el-button size="small" icon="el-icon-refresh" @click="handleRefresh(true)">刷新</el-button>
            </div>
          </div>

        </el-form>
        <egrid v-loading="loading" class="egrid" stripe fit border highlight-current-row element-loading-text="正在努力加载中..." :column-type="['selection']" :data="tableData" :columns="columns" :columns-schema="columnsSchema" :columns-handler="columnsHandler" @selection-change="checkIds" />
        <epagination v-if="tableData" :total="total" :current="searchParams.page" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-row>
    <!-- 新增一级分类 -->
    <el-dialog v-if="addFirstClassifyVisible" :title="firstDialogTitle" :visible.sync="addFirstClassifyVisible" :close-on-click-modal="true" width="30%" class="dialogText dialogHeaderBg" element-loading-text="正在加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :destroy-on-close="true">
      <el-form v-if="addFirstClassifyVisible" ref="firstClassifyForm" :model="firstClassifyForm" :rules="firstClassifyRules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="分类名称" prop="name">
              <el-input v-model.trim="firstClassifyForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分类编码" prop="code">
              <el-input v-model.trim="firstClassifyForm.code" :disabled="!!firstClassifyForm.id" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注说明" prop="remark">
              <el-input v-model.trim="firstClassifyForm.remark" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="firstBtnLoading" @click="submitFirstClassify">保存</el-button>
        <el-button @click="cancelFirstClass">取消</el-button>
      </span>
    </el-dialog>
    <!-- 新增二级分类 -->
    <el-dialog v-if="addSecondClassifyVisible" title="新增二级分类" :visible.sync="addSecondClassifyVisible" :close-on-click-modal="true" width="700px" class="dialogText dialogHeaderBg" element-loading-text="正在加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :destroy-on-close="true">
      <el-form v-if="addSecondClassifyVisible" ref="SecondClassifyForm" :model="SecondClassifyForm" :rules="SecondClassifyRules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级分类名称" prop="parentName">
              <el-input v-model.trim="SecondClassifyForm.parentName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分类名称" prop="name">
              <el-input v-model.trim="SecondClassifyForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分类编码" prop="code">
              <el-input v-model.trim="SecondClassifyForm.code" :disabled="!!SecondClassifyForm.id" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="国内(HS)" prop="ZH_HS">
              <el-input v-model.trim="SecondClassifyForm.ZH_HS" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="国外(HS)" prop="EN_HS">
              <el-input v-model.trim="SecondClassifyForm.EN_HS" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="国内退税率" prop="tax_rebate_rate">
              <el-input v-model.trim="SecondClassifyForm.tax_rebate_rate">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="国外关税税率" prop="tax_tariff_rate">
              <el-input v-model.trim="SecondClassifyForm.tax_tariff_rate">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关税杂税率" prop="mix_tariff_rate">
              <el-input v-model.trim="SecondClassifyForm.mix_tariff_rate">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="额外关税率" prop="additional_tax_rate">
              <el-input v-model.trim="SecondClassifyForm.additional_tax_rate">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注说明" prop="remark">
              <el-input v-model.trim="SecondClassifyForm.remark" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="secondBtnLoading" @click="submitSecondClassify">保存</el-button>
        <el-button @click="cancelSecondClass">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import list from '@/layout/mixin/list'
import btnGroup from './components/btnGroup'
import dicValues from '@/components/dicTransform/index'
import { validChineseOrs, validPrice4 } from '@/utils/validate'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import { toThousandFilter } from '@/filters/index'
import cacheList from '@/layout/mixin/cacheList'
export default {
  name: 'ProductClassify',
  directives: {
    action
  },
  mixins: [list, cacheList],
  data() {
    const DICTIONARIES = {
      auditStatus: [
        // 状态，0-启用 1-禁用
        {
          code: 0,
          name: '启用'
        },
        {
          code: 1,
          name: '禁用'
        }
      ]
    }
    return {
      /** *
       * 定义搜索框
       */
      componentName: 'ProductClassify',
      searchParams: {
        name: ''
      },
      treeData: [],
      tableData: [],
      columns: [
        {
          label: '二级分类名称',
          prop: 'name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '分类编码',
          prop: 'code',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '上级分类',
          prop: 'parent_name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '国内退税率(%)',
          prop: 'tax_rebate_rate',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '国外关税税率(%)',
          prop: 'tax_tariff_rate',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '关税杂税率(%)',
          prop: 'mix_tariff_rate',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '额外关税率(%)',
          prop: 'additional_tax_rate',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '状态',
          prop: 'is_status',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '备注',
          prop: 'remark',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建人',
          prop: 'creator_name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建时间',
          prop: 'created_at',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改人',
          prop: 'update_name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改时间',
          prop: 'updated_at',
          width: '200',
          align: 'center',
          tooltip: false
        }
      ],
      /** *
       * 字典表组件
       */
      columnsSchema: {
        状态: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['auditStatus'],
              code: row[col.prop]
            }
          },
          component: dicValues
        }
      },
      issignContract: [],
      addFirstClassifyVisible: false, // 新增一级分类
      firstClassifyForm: {
        name: '',
        code: '',
        remark: ''
      },
      firstClassifyRules: {
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { max: 50, message: '分类名称必须在50个字符以内', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入分类编码', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              if (validChineseOrs(value)) {
                callback(new Error('编码须是字母，数字，非空字符组成'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          },
          { max: 30, message: '分类名称必须在30个字符以内', trigger: 'blur' }
        ],
        remark: [
          { max: 500, message: '分类名称必须在500个字符以内', trigger: 'blur' }
        ]
      },

      addSecondClassifyVisible: false, // 新增二级分类
      SecondClassifyForm: {
        parentName: '', // 上级分类名称
        name: '', // 分类名称
        code: '', // 分类编码
        ZH_HS: '', // 国内(HS)
        EN_HS: '', // 国外(HS)
        tax_rebate_rate: '', // 国内退税率
        tax_tariff_rate: '', // 国外关税税率
        remark: '' // 备注说明
      },
      SecondClassifyRules: {
        parentName: [{ required: true }],
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { max: 50, message: '分类名称必须在50个字符以内', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入分类编码', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              if (validChineseOrs(value)) {
                callback(new Error('编码须是字母，数字，非空字符组成'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          },
          { max: 30, message: '分类名称必须在30个字符以内', trigger: 'blur' }
        ],
        ZH_HS: [
          { required: true, message: '请输入国内(HS)', trigger: 'blur' },
          { max: 30, message: '国内(HS)必须在30个字符以内', trigger: 'blur' }
        ],
        EN_HS: [
          { required: true, message: '请输入国外(HS)', trigger: 'blur' },
          { max: 30, message: '国外(HS)必须在30个字符以内', trigger: 'blur' }
        ],
        tax_rebate_rate: [
          { required: true, message: '请输入国内退税率', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              if (!validPrice4(value)) {
                callback(new Error('国内退税率必须为百分数，且保留四位小数'))
              } else if (value < 0 || value > 100) {
                callback(new Error('国内退税率必须[0, 100]之间'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        tax_tariff_rate: [
          { required: true, message: '请输入国外关税率', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              if (!validPrice4(value)) {
                callback(new Error('国外关税率必须为百分数，且保留四位小数'))
              } else if (value < 0 || value > 100) {
                callback(new Error('国外关税率必须[0, 100]之间'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        mix_tariff_rate: [
          {
            validator(rule, value, callback) {
              if (value) {
                if (!validPrice4(value)) {
                  callback(new Error('关税杂税率必须为百分数，且保留四位小数'))
                } else if (value < 0 || value > 100) {
                  callback(new Error('关税杂税率必须[0, 100]之间'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        additional_tax_rate: [
          {
            validator(rule, value, callback) {
              if (value) {
                if (!validPrice4(value)) {
                  callback(new Error('额外关税率必须为百分数，且保留四位小数'))
                } else if (value < 0 || value > 100) {
                  callback(new Error('额外关税率必须[0, 100]之间'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        remark: [
          { max: 500, message: '备注必须在500个字符以内', trigger: 'blur' }
        ]
      },
      searchSecondParams: {
        page: 1,
        limit: 10,
        name: '',
        status: ''
      },
      statusList: [
        // 状态，0-启用 1-禁用
        {
          code: 0,
          name: '启用'
        },
        {
          code: 1,
          name: '禁用'
        }
      ],
      firstClassObject: '', // 一级分类
      firstDialogTitle: '新增一级分类',
      isEditSecond: false, // 二级分类是否为编辑
      isEditFirst: false, // 一级分类是否为编辑
      is_del: '',
      firstBtnLoading: false,
      secondBtnLoading: false
    }
  },
  mounted() {
    this.getFirstClassifyList()
  },
  methods: {
    // 一级分类树
    getFirstClassifyList() {
      const params = {
        page: 1,
        limit: 100000000,
        status: 0,
        name: this.searchParams.name
      }
      this.treeData = []
      this.firstClassObject = []
      this.tableData = []
      this.total = 0
      this.$http
        .get(`/category`, { params })
        .then((res) => {
          if (res.code === 10000 && res.data && res.data.length > 0) {
            res.data.forEach((element) => {
              element['label'] = element.name
              element['key'] = 1
            })
            this.treeData = res.data
            this.firstClassObject = res.data[0]
            this.firstClassObject.id = res.data[0].id
            this.is_del = this.firstClassObject.id
            this.getSecondClassifyData()
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 一级分类编辑
    editFirstClassify(data) {
      this.firstDialogTitle = '编辑一级分类'
      this.isEditFirst = true
      this.firstClassifyForm = Object.assign({}, data)
      this.addFirstClassifyVisible = true
    },
    // 一级分类删除
    deleteFirstClassify(data, callback) {
      this.$confirm('确认要删除？', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http
            .delete(`/category/${data.id}`)
            .then((res) => {
              if (res.code === 10000) {
                this.$message.success('删除成功')
                if (typeof callback === 'function') {
                  callback()
                } else {
                  this.getFirstClassifyList()
                }
              }
            })
            .catch(() => {
              this.loading = false
            })
        })
        .catch((action) => { })
    },
    // 点击一级分类
    nodeClick(data) {
      this.is_del = data.id
      // 清空搜索条件
      this.searchSecondParams.page = 1
      this.searchSecondParams.limit = 10
      this.searchSecondParams.name = ''
      this.searchSecondParams.status = ''
      this.firstClassObject = data
      const tableEle = document.querySelector('.el-table__body-wrapper')
      tableEle.scrollLeft = 0
      this.getSecondClassifyData()
    },
    getSecondClassifyData() {
      const params = {
        name: this.searchSecondParams.name,
        status: this.searchSecondParams.status,
        limit: this.searchSecondParams.limit,
        page: this.searchSecondParams.page
      }
      this.loading = true
      this.$http
        .get(`/category/getChildList/${this.firstClassObject.id}`, { params })
        .then((res) => {
          this.tableData = res.data
          this.total = res.count
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    handleSizeChange(val) {
      const vm = this
      vm.searchSecondParams.limit = val
      vm.getSecondClassifyData()
    },
    handleCurrentChange(val) {
      this.searchSecondParams.page = val
      this.getSecondClassifyData()
    },
    // 二级分类搜索
    statusQuery() {
      this.getSecondClassifyData()
    },
    handleRefresh(refreshPage) {
      this.searchSecondParams.name = ''
      this.searchSecondParams.status = ''
      if (refreshPage) {
        this.searchSecondParams.page = 1
      }
      this.getSecondClassifyData()
    },
    // 清空一级分类
    initfirstData() {
      this.firstClassifyForm = {
        name: '',
        code: '',
        remark: ''
      }
    },
    // 新增一级分类
    addClassify() {
      this.isEditFirst = false
      this.initfirstData()
      this.addFirstClassifyVisible = true
    },
    // 一级分类保存
    submitFirstClassify() {
      if (this.isEditFirst) {
        this.$refs['firstClassifyForm'].validate((valid) => {
          if (valid) {
            this.firstBtnLoading = true
            delete this.firstClassifyForm.created_at
            delete this.firstClassifyForm.updated_at
            this.$http
              .put(
                `/category/${this.firstClassifyForm.id}`,
                this.firstClassifyForm
              )
              .then((res) => {
                if (res.code === 10000) {
                  this.$message.success('编辑成功')
                  this.getFirstClassifyList()
                }
                this.firstBtnLoading = false
                this.addFirstClassifyVisible = false
              })
              .catch(() => {
                this.firstBtnLoading = false
              })
          }
        })
      } else {
        this.$refs['firstClassifyForm'].validate((valid) => {
          if (valid) {
            this.firstBtnLoading = true
            delete this.firstClassifyForm.created_at
            delete this.firstClassifyForm.updated_at
            this.$http
              .post('/category', this.firstClassifyForm)
              .then((res) => {
                if (res.code === 10000) {
                  this.$message.success('新增成功')
                  this.getFirstClassifyList()
                }
                this.firstBtnLoading = false
                this.addFirstClassifyVisible = false
              })
              .catch(() => {
                this.firstBtnLoading = false
              })
          }
        })
      }
    },
    cancelFirstClass() {
      const vm = this
      vm.addFirstClassifyVisible = false
      vm.initfirstData()
    },
    // 新增二级分类
    addTwoClassify() {
      this.isEditSecond = false
      console.log(this.firstClassObject, 'this.firstClassObject>>>>>')
      this.initSecondData()
      this.SecondClassifyForm.parentName = this.firstClassObject.name
      this.SecondClassifyForm['parent_id'] = this.firstClassObject.id
      this.addSecondClassifyVisible = true
    },
    initSecondData() {
      this.SecondClassifyForm = {
        parentName: '', // 上级分类名称
        name: '', // 分类名称
        code: '', // 分类编码
        ZH_HS: '', // 国内(HS)
        EN_HS: '', // 国外(HS)
        tax_rebate_rate: '', // 国内退税率
        tax_tariff_rate: '', // 国外关税税率
        remark: '' // 备注说明
      }
    },
    // 批量修改商品基准价
    updateProductPrice(category_id) {
      const vm = this
      vm.$confirm('是否生成相关商品基准价?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        const params = {
          type: 2,
          category_id
        }
        vm.$http.post('/productPrice/updateProductPrice', params).then(() => {
          vm.$message.success('生成成功')
        })
      })
    },
    // 二级分类保存
    submitSecondClassify() {
      const vm = this
      // 编辑
      if (vm.isEditSecond) {
        vm.$refs['SecondClassifyForm'].validate((valid) => {
          if (valid) {
            // 删除 创建时间和修改时间
            const params = Object.assign({}, vm.SecondClassifyForm)
            delete params.created_at
            delete params.updated_at
            vm.secondBtnLoading = true
            vm.$http
              .put(
                `/category/${vm.SecondClassifyForm.id}`,
                params
              )
              .then((res) => {
                if (res.code === 10000) {
                  vm.$message.success('修改成功')
                  vm.getSecondClassifyData()
                  vm.updateProductPrice(vm.SecondClassifyForm.id)
                }
                vm.secondBtnLoading = false
                vm.addSecondClassifyVisible = false
              })
              .catch(() => {
                vm.secondBtnLoading = false
              })
          }
        })
      } else {
        vm.$refs['SecondClassifyForm'].validate((valid) => {
          if (valid) {
            vm.secondBtnLoading = true
            vm.$http
              .post('/category', vm.SecondClassifyForm)
              .then((res) => {
                if (res.code === 10000) {
                  vm.$message.success('新增成功')
                  vm.getSecondClassifyData()
                }
                vm.secondBtnLoading = false
                vm.addSecondClassifyVisible = false
              })
              .catch(() => {
                vm.secondBtnLoading = false
              })
          }
        })
      }
    },
    // 取消
    cancelSecondClass() {
      const vm = this
      vm.addSecondClassifyVisible = false
      vm.initSecondData()
    },
    // 自定义操作栏
    columnsHandler(cols) {
      const that = this
      return cols.concat({
        width: '200',
        label: '操作',
        align: 'center',
        fixed: 'left',
        propsHandler({ row }) {
          // 启用
          const startShow = row.is_status === 0
          return {
            row: row,
            isStart: startShow
          }
        },
        component: btnGroup,
        // listeners 可用于监听自定义组件内部 $emit 出的事件
        listeners: {
          editClick(row) {
            that.SecondClassifyForm = JSON.parse(JSON.stringify(row))
            that.SecondClassifyForm['parentName'] = that.firstClassObject.name
            that.SecondClassifyForm['parent_id'] = that.firstClassObject.id
            const { tax_rebate_rate, tax_tariff_rate, mix_tariff_rate, additional_tax_rate } = that.SecondClassifyForm
            that.SecondClassifyForm.tax_rebate_rate = toThousandFilter(tax_rebate_rate)
            that.SecondClassifyForm.tax_tariff_rate = toThousandFilter(tax_tariff_rate)
            that.SecondClassifyForm.mix_tariff_rate = toThousandFilter(mix_tariff_rate)
            that.SecondClassifyForm.additional_tax_rate = toThousandFilter(additional_tax_rate)

            that.isEditSecond = true
            that.addSecondClassifyVisible = true
          },
          // 启用
          startClick(row) {
            that
              .$confirm('确认要启用？', '提示', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
              .then(() => {
                that.$http
                  .put(`/category/verify/${row.id}`, {
                    is_status: row.is_status === 0 ? 1 : 0
                  })
                  .then((res) => {
                    if (res.code === 10000) {
                      that.$message.success('启用成功')
                      that.getSecondClassifyData()
                    }
                  })
                  .catch(() => {
                    that.loading = false
                  })
              })
              .catch((action) => { })
          },
          stopClick(row) {
            that
              .$confirm('确认要禁用？', '提示', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
              .then(() => {
                that.$http
                  .put(`/category/verify/${row.id}`, {
                    is_status: (row.is_status = row.is_status === 1 ? 0 : 1)
                  })
                  .then((res) => {
                    if (res.code === 10000) {
                      that.$message.success('禁用成功')
                      that.getSecondClassifyData()
                    }
                  })
                  .catch(() => {
                    that.loading = false
                  })
              })
              .catch((action) => { })
          },
          deleteClick(row) {
            that.deleteFirstClassify(row, () => {
              that.getSecondClassifyData()
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.product-category-text {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  line-height: 32px;
  margin-left: 24px;
}
.comon-img {
  width: 16px;
  height: 16px;
}
.margin-left-20 {
  margin-left: 20px;
}
.margin-left-10 {
  margin-left: 7px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
